---
// TODO: 由于当前项目已经存在`pages/tags/`目录，虽然也可以再新建`pages/tags.astro`页面，但是路由参数可能会产生冲突。
// 另一种路由模式：在`pages/tags/`目录下新建`index.astro`页面
// `src/pages/tags/index.astro`与`src/pages/tags.astro`等价，路由相同。

import BaseLayout from "../../layouts/BaseLayout.astro"
const pageTitle = "标签索引"

// 动态获取所有markdown信息，从`../posts/*.md`中。
// const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }))
const allPosts = await Astro.glob('../posts/*.md');// 简化写法
// 动态获取所有标签，根据所有markdown文件信息
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
---

<BaseLayout pageTitle={pageTitle}>
  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>
</BaseLayout>

<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>